import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:bilibili/core/extension/int_extension.dart';

class LoginHeader {
  final FocusNode focusNode;
  final imageNum;
  final dividerColor = Color.fromARGB(255, 190, 190, 190);
  final BuildContext context;
  final Function(String) getAccount;
  final Function(String) getPassword;

  LoginHeader(this.context, this.imageNum, this.focusNode, this.getAccount, this.getPassword);


  Widget buildLoginHeader(

      {bool isReg=false}) {
    return isReg
        ? buildRegColumn()
        : buildLoginColumn();
  }

  Column buildLoginColumn() {
    return Column(
    children: [
      Image.asset("images/login/login_image0$imageNum.jpg", fit: BoxFit.fitWidth,),
      buildInputFields("账号", "请输入邮箱", false, getAccount),
      buildDivider(dividerColor),
      buildInputFields("密码", "请输入密码", true, getPassword, focusNode: focusNode),
      buildDivider(dividerColor)
    ],
  );
  }
  Column buildRegColumn() {
    return Column(
      children: [
        Image.asset("images/login/login_image0$imageNum.jpg", fit: BoxFit.fitWidth,),
        buildInputFields("账号", "请输入邮箱", false, getAccount),
        buildDivider(dividerColor),
        buildInputFields("密码", "请输入密码", true, getPassword, focusNode: focusNode),
        buildDivider(dividerColor)
      ],
    );
  }

  Divider buildDivider(Color dividerColor) => Divider(indent: 30.px, height: 1.px, color: dividerColor,);

  Widget buildInputFields(String title, String hintText, bool obscureText, Function(String) function, {var focusNode}){
    return Container(
      padding: EdgeInsets.zero,
      color: Colors.white,
      child: Row(
        children: [
          Container(
              width: 150.px,
              // color: Colors.red,
              padding: EdgeInsets.only(left: 30.px),
              child: Text(title, style: Theme.of(context).textTheme.headline2)
          ),
          Expanded(
            child: TextField(
              onChanged: function,
              focusNode: focusNode,
              cursorColor: Colors.pinkAccent,
              obscureText: obscureText,
              cursorHeight: 40.px,
              decoration: InputDecoration(
                hintText: hintText,
                hintStyle: Theme.of(context).textTheme.headline1!.copyWith(color: dividerColor),
                border: InputBorder.none, ),
            ),
          ),
        ],
      ),
    );
  }

}